<template>
	<view>
		<page-head headTitle="订单管理" :returnButton="true" :newsy="true" @clickLeftReturn="clickLeftReturn" @clickRightNewsy="clickRightNewsy"></page-head>
		<view class="bg-white p-l-r3 p-t-b3 fixed fixed-top9 orde-pb">
			<view class="flex flex-1 bg-search search-h justify-content align-center border-r">
				<text class="iconfont icon-biaoqing search-icon"></text>
				<input class="search-width" v-model="keyword" placeholder-class="input-goods fs-g search-width" type="text" placeholder="请输入商品名称">
		    </view>
			<view class="flex height align-center fs-g">
				<view @click="changen(index)" class="flex-1 flex justify-content orde-r fs-g" 
				v-for="(item,index) in tabBar" :key="index" :class="tabIndex===index?'order-bj':''">
				<text class="order-text" >{{item.name}}</text>
			</view>
			</view>
		</view>
		<view class="orde-mt">
			<view class="m bg-white" v-for="(item,index) in list" v-show="tabIndex==index">
				<view v-if="showNav">
					<view class="p-l-r2">
						<view class="flex height align-center fs-3 border-botton">
							<text class="flex-1 flex justify-content">订单编号</text>
							<text class="flex-1 flex justify-content">商品名称</text>
							<text class="flex-1 flex justify-content">状态</text>
							<text class="flex-1 flex justify-content">操作</text>
						</view>
					</view>
					<view class="table">
						<view v-for="(v_item,v_index) in item" :key="v_item.id" class="flex search-h align-center p-l-r2 fs-2 color-table">
							<text class="flex-1 flex justify-content" style="overflow: hidden;">{{v_item.sn}}</text>
							<text class="flex-1 flex justify-content">{{v_item.goods_name}}</text>
							<text class="flex-1 flex justify-content">{{v_item.status_text}}</text>
							<text class="flex-1 flex justify-content color-blue">查看</text>	
						</view>
					</view>
				</view>	
			</view>
			<!-- 占位图 -->
				<view v-if="showIcon" class="flex justify-content flex-wrap order-rmanage-mt" >
					<image src="/static/images/order_none.png" class="order-icon">
				</view>	
			<view class="loading">{{loadingText}}</view>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
	export default {
		components:{
			pageHead
		},
		data() {
			return {
				tabIndex:0,
				tabBar:[
					{name:'全部'},
					{name:'待处理'},
					{name:'已完成'},
					{name:'已取消'}
				],
				keyword:'',
				list:[{},{},{},{}],
				showList:[[],[],[],[]],
				pages:[
					{page:1},
					{page:1},
					{page:1},
					{page:1}
				],
				last:[
					{isLast:0},
					{isLast:0},
					{isLast:0},
					{isLast:0}
				],
				onload:0,
				loadingText:'',
				showNav:true,
				showIcon:false
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if(this.onload !=1){ 
				this.getList(this.tabIndex, 1); //下一页
			}
		},
		methods: {
			changen(index){
				this.tabIndex = index;
				this.loadingText = '';
				if(this.pages[index].page == 1 && this.last[index].isLast === 0 && this.list[index].length == 0){
					this.getList(index);
					//console.log(this.getList(index));
				}
				if(this.showList[index].length==0 && this.last[index].isLast == 1){
					console.log(1);
					this.showIcon = true;
					this.showNav = false;
				}else{
					console.log(0);
					this.showIcon = false;
					this.showNav = true;
				}
			},
			clickLeftReturn(){
				uni.redirectTo({
					url: '../index/index'
				})
			},
			clickRightNewsy(){
				
			},
			getList(index=0, next=0){
				if(this.last[index].isLast == 1){
					
					return false;
				}
				var status;
				switch(index) {
				    case 0:
						status = -1;
				        break;
				    case 1:
				        status = 0;
				        break;
					case 2:
					    status = 99;
					    break;
					case 3:
					    status = 21;
					    break;
				    default:
				        status = -1;
				}
				var page = this.pages[index].page;
				if(next == 1){
					page+=1;
					if(this.onload == 1){
						return false;
					}
					this.onload = 1;
					this.loadingText = '加载中...';
					uni.showNavigationBarLoading();
				}
				this.$myRequest({
					method:'POST',
					url:'/api/guide/orders',
					data:{
						status:status,
						sn:this.keyword,
						page:page,
						page_size:10
					},
				}).then(res=>{
					
					if(res.data.code == 1){
						var result_list = res.data.data;
						//console.log(result_list);
						if(next == 1){
							//下一页
							if(result_list == ''){
								this.last[index].isLast = 1;
								uni.hideNavigationBarLoading();
								this.loadingText = '已加载全部';
							}else{
								this.list[index] = this.list[index].concat(result_list);
								this.loadingText = '加载更多';
								this.pages[index].page = page;
								uni.hideNavigationBarLoading();
							}
							this.onload = 0;
							
						}else{
							//加载默认
							if(result_list == ''){
								//切换菜单栏，无订单时候显示占位图处
								this.last[index].isLast = 1;
								this.showIcon = true;
								this.showNav = false;
								//console.log(22);
							}else{
								this.showIcon = false;
								this.showNav = true;
								this.showList[index] = result_list;
								this.list = '';
								this.list = this.showList;
							}
										
						}
					}
				})
			},
			see(e){
				var orderSn = e.currentTarget.dataset.sn;
				uni.navigateTo({
					url: '../order-details/order-details?sn='+orderSn,
				});
			}
		}
	}
</script>

<style scoped>
.search-icon{font-size: 60rpx;color: #AAAAAA;}
.orde-mt{margin-top: 360rpx;}
.order-rmanage-mt{margin-top: 550rpx;}
.orde-pb{padding-bottom: 0;}
</style>
